<!--
  * 枚举 下拉框
  *
-->
<template>
  <a-select v-model:value="selectValue" :style="`width: ${width}`" :mode="multiple ? 'multiple' : undefined" :placeholder="props.placeholder" :dropdownMatchSelectWidth="false" :showSearch="true" :allowClear="true" @change="handleChange" :disabled="disabled" @inputKeyDown="onSubmit">
    <a-select-option v-for="item in getValueDescList(props.enumName)" :key="item.value" :value="item.value">
      {{ item.desc }}
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import { useEnums } from '@/hooks/plugins/useEnums'
import { useAppConfigStore } from '@/store/modules/app-store'
const { getValueDescList } = useEnums()
const props = defineProps({
  enumName: {
    type: String,
    required: true
  },
  value: [Number, String],
  width: {
    type: String,
    default: '100%'
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  size: {
    type: String,
    default: useAppConfigStore().$state.componentSize
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // 新增：控制是否多选
  multiple: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:value', 'change', 'submit'])

const selectValue = ref(props.value)

watch(
  () => props.value,
  (newValue) => {
    selectValue.value = newValue
  }
)

function handleChange(value) {
  emit('update:value', value)
  emit('change', value)
}

function onSubmit(e) {
  if (e.key === 'Enter') {
    emit('submit', selectValue.value)
  }
}
</script>
